<template>
	<view class="add-clues-container">
		<view class="public-container">
			<view class="cell-row" @click="handleFormClick">
				<view class="c-label">
					<text class="check-icon">*</text>
					<text class="text">线索来源</text>
				</view>
				
				<view class="c-value">
					<text :class="{'placeholder-value': true, 'value': fromName }">{{fromName ? fromName : '请选择线索来源'}}</text>
					<image class="right-arrow" :src="getImgUrl('/applet_assets/safe_closed/right.png')" lazy-load="true" mode="scaleToFill" />
				</view>
			</view>
		</view>
		<view class="public-container margin-top-40">
			<text class="title">线索信息</text>
			
			<view class="clues-info">
				<view class="public-row">
					<view class="public-title"> <text class="check-icon">*</text> 客户姓名</view>
					<view class="public-right-box">
						<u-input v-model="cluesInfo.contact_name" placeholder="请输入客户姓名" border="none" inputAlign="right" color="#333333" placeholderStyle="color:#999999;"></u-input>
					</view>
				</view>
				<view class="public-row display-flex-row">
					<view class="public-title"> <text class="check-icon">*</text> 客户手机号</view>
					<view class="public-right-box display-flex-right">
						<view class="select-top" @click="handleMobileClick">
							<view class="public-content">{{mobileStyleName}}</view>
							<image class="right-arrow" :src="getImgUrl('/applet_assets/safe_closed/right.png')" lazy-load="true" mode="scaleToFill" />
						</view>
						<view class="input-value">
							<u-input maxlength="11" ref="inputRef" @change="handleChangeInput" v-model="mobileName" :placeholder="phonePlaceholder" border="none" inputAlign="right" color="#333333" placeholderStyle="color:#999999;"></u-input>
						</view>
					</view>
				</view>
				<view class="public-row display-flex-row">
					<view class="public-title">其他联系方式</view>
					<view class="public-right-box display-flex-right">
						<view class="select-top" @click="handleOtherRelationClick">
							<view class="public-content">{{relationOtherName}}</view>
							<image class="right-arrow" :src="getImgUrl('/applet_assets/safe_closed/right.png')" lazy-load="true" mode="scaleToFill" />
						</view>
						<view class="input-value">
							<u-input v-model="cluesInfo.other_contact_value" maxlength="30" placeholder="请输入" border="none" inputAlign="right" color="#333333" placeholderStyle="color:#999999;"></u-input>
						</view>
					</view>
				</view>
				<view class="public-row">
					<view class="public-title">公司名称</view>
					<view class="public-right-box">
						<u-input v-model="cluesInfo.company_name" placeholder="请输入公司名称" border="none" inputAlign="right" color="#333333" placeholderStyle="color:#999999;"></u-input>
					</view>
				</view>
				<view class="public-row">
					<view class="public-title">行业</view>
					<view class="public-right-box" @click="handleIndustryClick">
						<view class="public-content" :class="industryName ? 'value' : ''">{{industryName ? industryName : '请选择行业'}}</view>
						<image class="right-arrow" :src="getImgUrl('/applet_assets/safe_closed/right.png')" lazy-load="true" mode="scaleToFill" />
					</view>
				</view>
				<view class="public-row">
					<view class="public-title">备注</view>
					<view class="public-right-box">
						<u-input v-model="cluesInfo.remark" maxlength="30" placeholder="请输入备注" border="none" inputAlign="right" color="#333333" placeholderStyle="color:#999999;"></u-input>
					</view>
				</view>
			</view>
		</view>
		<!-- 来源 -->
		<u-picker @cancel="handleFormCnacel" @confirm="handleFormConfirm" :show="fromShow" :columns="formColumns" keyName="label" title="线索来源" cancelColor="#999999" confirmColor="#165DFF"></u-picker>
		<u-picker @cancel="handlePhoneCnacel" @confirm="handlePhoneConfirm" :show="phoneShow" :columns="phoneColumns" keyName="label" cancelColor="#999999" confirmColor="#165DFF"></u-picker>
		<!-- 其他联系方式 -->
		<u-picker @cancel="handleRelationCnacel" @confirm="handleRelationConfirm" :show="relationShow" :columns="relationColumns" keyName="label" cancelColor="#999999" confirmColor="#165DFF"></u-picker>
		<!-- 行业 -->
		<u-picker @cancel="handleIndustryCnacel" @confirm="handleIndustryConfirm" :show="industryShow" :columns="industryColumns" title="行业" keyName="name" cancelColor="#999999" confirmColor="#165DFF"></u-picker>
		<toast-icon ref="toastIconRef"></toast-icon>
		<view class="cus_footer_btn">
		  <tm-button block label="提交" round="25" @click="handleSubmitCluesInfo"></tm-button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import {ASSETS_HOST} from '@/config';
	import { onReachBottom, onLoad, onReady } from '@dcloudio/uni-app'
	import {allDictDataList, createdCluespool} from '@/api_request/api'
	import {validateChinese, validateMobile} from '@/utils/utils'
	import toastIcon from '@/components/toast-icon/toast-icon'
  import {cloneDeep} from 'lodash'
	const cluesInfo = ref({
		contact_name: '', // 联系人姓名
		from: '', // 来源
		mobile_style: '1', // 手机号方式：1=显号，2=前3后4
		mobile: '', // 手机号
		other_contact_channel: '1', // 其他联系方式
		other_contact_value: '', // 其他联系值
		company_name: '', // 公司名称
		industry: '', // 行业
		remark: '' // 备注
	})
	const industryName = ref<string>('') // 行业名称
	const fromName = ref<string>('') // 来源名称
	const fromShow = ref<boolean>(false)
	const phoneShow = ref<boolean>(false)
	const relationShow = ref<boolean>(false)
	const industryShow = ref<boolean>(false)
	const phonePlaceholder = ref<string>('请输入')
	const mobileName = ref<string | number>('')
	const mobileStyleName = ref<string>('显号')
	const relationOtherName = ref<string>('邮箱')
	const toastIconRef = ref(null)
	const inputRef = ref(null)
	const formColumns = reactive([
		[
			{
				label: '自建线索',
				id: 1
			}
		]
	])
	const phoneColumns = reactive([
		[
			{
				label: '显号',
				id: 1
			},
			{
				label: '隐号',
				id: 2
			}
		]
	])
	const relationColumns = reactive([
		[
			{
				label: '固话',
				id: 1
			},
			{
				label: '手机号',
				id: 2
			},
			{
				label: '微信',
				id: 3
			},
			{
				label: '邮箱',
				id: 4
			}
		]
	])
	const industryColumns = reactive([])
	const addType = ref('')
	onLoad((option:any)=> {
		addType.value = option.type
	})
	//  线索来源点击
	const handleFormClick =() => {
		fromShow.value = true
	}
	const handleFormCnacel = () => {
		fromShow.value = false
	}
	const handleFormConfirm = (e) => {
		cluesInfo.value.from = e.value[0].id
		fromName.value = e.value[0].label
		fromShow.value = false
	}
	//  线索来源点击
	const handleMobileClick =() => {
		phoneShow.value = true
	}
	const handlePhoneCnacel = () => {
		phoneShow.value = false
	}
	const handlePhoneConfirm = (e) => {
		cluesInfo.value.mobile_style = e.value[0].id
		mobileStyleName.value = e.value[0].label
		if(cluesInfo.value.mobile_style == 1) {
			phonePlaceholder.value = '请输入'
      mobileName.value = submitMobile.value
			if(cluesInfo.value.mobile.length == 11) mobileName.value = cluesInfo.value.mobile
		}else {
			phonePlaceholder.value = '请输入 **** 请输入'
      const newValue = cloneDeep(mobileName.value)
      submitMobile.value = cloneDeep(mobileName.value)
      let __mobile = ''
      for (let i = 0; i < newValue.length; i++) {
        if(i === 3 || i === 4 || i === 5 || i === 6) {
          __mobile += '*'
        } else {
          __mobile += newValue[i]
        }
      }
      console.log('jp======__mobile',__mobile)
      mobileName.value = __mobile
			// handleChangeInput(cluesInfo.value.mobile)
		}
		console.log('======1323123132======', cluesInfo.value.mobile);
		phoneShow.value = false
	}
	const submitMobile = ref<any>('')
	const handleChangeInput = (e)=> {
		console.log('==========we===========', mobileName.value)
    if(mobileStyleName.value === '隐号') {
      if(e.length >= 4 && e.length <= 7) {
        const before = e.substr(0, 3)
        if(e.length === 4) {
          submitMobile.value = cloneDeep(e)
        } else{
          let __value = submitMobile.value
          const last = cloneDeep(e[e.length-1])
          submitMobile.value = __value + last
        }

        let newValue = `${before}`
        for(let i = 0; i<e.length -3; i++) {
          newValue+='*'
        }
        mobileName.value = newValue
      } else {
        let __value = submitMobile.value
        const last = cloneDeep(e[e.length-1])
        submitMobile.value = __value + last
      }
    console.log('jp======真实的号码',submitMobile.value)
    } else {
      // submitMobile.value = e
    }
		// if (e == undefined && e == null || e == '') {
		// 	cluesInfo.value.mobile = cluesInfo.value.mobile.slice(0,cluesInfo.value.mobile.length-(cluesInfo.value.mobile.length - mobileName.value.length))
		// } else {
		// 	var arr = []
		// 	if (cluesInfo.value.mobile_style == 1) {
		// 		// 显号
		// 		cluesInfo.value.mobile = e
		// 	} else {
		// 		if(e.length == 11 && !cluesInfo.value.mobile.includes('*')) {
		// 			cluesInfo.value.mobile = e
		// 			console.log('===========', cluesInfo.value.mobile);
		// 			// 隐号
		// 			try { arr.push(e[0]) } catch (e) {}
		// 			try { arr.push(e[1]) } catch (e) {}
		// 			try { arr.push(e[2]) } catch (e) {}
		// 			if (e.length > 3) { try { arr.push(`*`) } catch (e) {} }
		// 			if (e.length > 4) { try { arr.push(`*`) } catch (e) {} }
		// 			if (e.length > 5) { try { arr.push(`*`) } catch (e) {} }
		// 			if (e.length > 6) { try { arr.push(`*`) } catch (e) {} }
		// 			try { arr.push(e[7]) } catch (e) {}
		// 			try { arr.push(e[8]) } catch (e) {}
		// 			try { arr.push(e[9]) } catch (e) {}
		// 			try { arr.push(e[10]) } catch (e) {}
		// 			mobileName.value = arr.join(``)
		// 		}else {
		// 			mobileName.value = cluesInfo.value.mobile.substring(0,10)
		// 		}
		// 	}
		// }
	}
	// 其他联系方式
	const handleOtherRelationClick =() => {
		relationShow.value = true
	}
	const handleRelationCnacel = () => {
		relationShow.value = false
	}
	const handleRelationConfirm = (e) => {
		cluesInfo.value.other_contact_channel = e.value[0].id
		relationOtherName.value = e.value[0].label
		relationShow.value = false
	}
	// 选择行业
	const handleIndustryClick =() => {
		industryShow.value = true
	}
	const handleIndustryCnacel = () => {
		industryShow.value = false
	}
	const handleIndustryConfirm = (e) => {
		cluesInfo.value.industry = e.value[0].id
		industryName.value = e.value[0].name
		industryShow.value = false
	}
	//  获取行业
	const getIndustryList = ()=> {
		allDictDataList({id:1}).then(res => {
			industryColumns.push(res.data.list)
		}).catch(e => {
			uni.$showMsg(e.message)
		})
	}
	
	// 提交
	const handleSubmitCluesInfo = ()=> {
	  if(mobileStyleName.value === '隐号') {
      cluesInfo.value.mobile = submitMobile.value
    }
		if(!cluesInfo.value.from) return uni.$showMsg('请选择线索来源')
		if(!cluesInfo.value.contact_name) return uni.$showMsg('请输入客户姓名')
		if(cluesInfo.value.contact_name ){
			if(cluesInfo.value.contact_name.length > 8) return uni.$showMsg('客户名称不能超过8个字')
			if(!validateChinese(cluesInfo.value.contact_name)) return uni.$showMsg('客户名称只能输入中文')
		} 
		if(!cluesInfo.value.mobile) return uni.$showMsg('请输入客户手机号')
		if(cluesInfo.value.mobile && !validateMobile(cluesInfo.value.mobile)) return uni.$showMsg('请输入正确的手机号')
		if(cluesInfo.value.company_name && cluesInfo.value.company_name.length > 20) return uni.$showMsg('公司名称不能超过20个字')
		if(cluesInfo.value.other_contact_value && cluesInfo.value.other_contact_value.length > 20) return uni.$showMsg('其他联系方式不能超过20个字')
		if(cluesInfo.value.remark && cluesInfo.value.remark.length > 30) return uni.$showMsg('备注不能超过30个字')
		createdCluespool(cluesInfo.value).then(res => {
			if(res.code == 200) {
				toastIconRef.value.handleShow({
					show: true,
					type: 'success',
					message:'新增成功',
					time: 2000
				})
				if(addType.value == 'add') {
					uni.redirectTo({
						url: '/subpkg/clues_list/index'
					})
				}else {
					let pages = getCurrentPages()
					let prevPage = pages[pages.length - 2];
					prevPage.onLoad()
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					},500)
				}
			}else {
				uni.$showMsg(res.message)
			}
			
		}).catch(e => {
			uni.$showMsg(e.message)
		})
	}
	
	const getImgUrl = (url:string) => {
		return ASSETS_HOST + url
	}
	getIndustryList()
</script>

<style lang="scss" scoped>
.add-clues-container {
	
	.margin-top-40 {
		margin-top: 40rpx;
	}
	
	.public-container {
		padding: 0 20rpx;
		box-sizing: border-box;
		
		.cell-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 40rpx 46rpx 40rpx 20rpx;
			box-sizing: border-box;
			
			.c-label {
				display: flex;
				
				.check-icon {
					font-size: 28rpx;
					color: #EE4646;
					margin-right: 6rpx;
				}
				
				.text {
					font-size: 28rpx;
					color: #8091A4;
				}
			}
			
			.c-value {
				display: flex;
				align-items: center;
				
				.placeholder-value {
					font-size: 28rpx;
					color: #999999;
					margin-right: 16rpx;
				}
				.placeholder-value.value {
					color: #333333;
				}
			}
		}
		
		.title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}
		
		.clues-info {
			margin-top: 24rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			
			.public-row:last-child {
				border: none;
			}
			.public-row.display-flex-row {
				align-items: flex-start;
			}
			.public-row {
				border-bottom: 1px dashed #F4F4F4;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 0;
				box-sizing: border-box;
				
				.public-title {
					font-size: 28rpx;
					color: #8091A4;
					position: relative;
					
					.check-icon {
						position: absolute;
						top: 50%;
						font-size: 28rpx;
						left: -20rpx;
						transform: translateY(-50%);
						color: #EE4646;
					}
				}
				
				.public-right-box {
					display: flex;
					align-items: center;
					
					.public-content.value {
						color: #333333;
					}
					
					.public-content {
						font-size: 28rpx;
						color: #999999;
						margin-right: 16rpx;
					}
				}
				
				.public-right-box.display-flex-right {
					flex-direction: column;
					align-items: flex-end;
					flex: 1;
					.public-content {
						margin-right: 16rpx;
					}
					.select-top, .input-value {
						display: flex;
						align-items: center;
						
						.public-content {
							margin-right: 16rpx;
						}
					}
					
					.input-value {
						margin-top: 40rpx;
					}
					
				}
			}
		}
	}
	
	:deep(.u-popup__content) {
		border-radius: 40rpx;
		.u-picker{
			.u-toolbar {
				.u-toolbar__title {
					font-size: 36rpx;
					color: #333333;
				}
			}
		}
	}
}
</style>
